Skip to content

Conversation

@Fran-A-Dev
Copy link
Contributor

@Fran-A-Dev Fran-A-Dev commented Feb 22, 2025

Fixed the infinite loop on mobile in the primary menu component.

Just for full clarity on the changes I made:

  • Removed the transition/animation classes that might trigger re-renders
  • Used useCallback for the menu toggle handler
  • Simplified the menu state management
  • Made the MenuItems render conditionally with a simple boolean check
  • Removed the data-open/data-closed attributes that might be causing state updates
  • Made the mobile menu static instead of animated
  • Removed unnecessary props being passed to child components

I did all this to reduce the number of state updates, eliminate transition effects that might trigger re-renders and made the logic more simple.

The initial error on the browser gave a google tag manager warning on the console.

@headless-platform-by-wp-engine

Check out the recent updates to your Headless Platform preview environment:

App Environment URL Build
faustjs.org preview-env-fix/primary-menu-infinite-loop https://hd…wered.com ✅ (logs)

Learn more about preview environments in our documentation.

@colinmurphy
Copy link
Member

LGTM 🚀

@colinmurphy colinmurphy merged commit 4670cdb into main Feb 24, 2025
4 checks passed
@colinmurphy colinmurphy deleted the fix/primary-menu-infinite-loop branch February 24, 2025 14:55
@moonmeister
Copy link
Member

The best I can tell is this completely broke all keyboard nav. The UI is also broken and only works with touch events.
image

@moonmeister moonmeister restored the fix/primary-menu-infinite-loop branch March 4, 2025 22:10
@moonmeister moonmeister mentioned this pull request Mar 4, 2025
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants